<template>
  <div>
    <div
      ref="pie2"
      :style="{ width: stylePie.width + 'px', height: stylePie.height + 'px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "pieChart2",
  props: {
    stylePie: {
      type: Object,
      default: () => {},
    },
    pieData:{
       type: Object,
      default: () => {},
    }
  },
  methods: {
    initChart() {
      const dom = this.$refs.pie2;
      var myChart = echarts.init(dom);
      const option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 0,
        // borderColor: '#fff',
        // borderWidth: 2
      },
      labelLine: {
        show: false
      },
      data: [
        // { value: 15,itemStyle: {color: '#d5871a'} },
        { value: 100, itemStyle: {color: this.pieData.color} },
      ]
    }
  ],
  graphic: {
        type: 'group',
        left: 'center',
        top: 'center',
        children: [
            {
                type: 'text',
                x:-15,
                y:-15,
                // left: 'center',
                // top: 'top',
                style: {
                    fill:this.pieData.color,
                    text: this.pieData.title,
                    font: 'bold 16px Microsoft YaHei'
                }
            },
        ]
    }
};
      myChart.setOption(option);
    },
  },
  mounted() {
    console.log(this.style);

    this.initChart();
  },
};
</script>

<style lang="scss" scoped>
</style>
